<template>
  <div class="detail-container" v-loading="loading">
     <el-card shadow="never" style="margin-top: 15px">
      <div class="operate-container">
        <i class="el-icon-warning color-danger" style="margin-left: 20px"></i>
          <span class="color-danger">当前申请状态：{{orderInfo.applyStateStr}}</span>
          <div style="float:right;margin-top:16px;margin-right:20px;line-height: 22px" >
              <el-button type="primary" @click="showPrint" size="small">打印</el-button>
              <div style="font-size:12px">已打印 {{orderInfo.hasPrintNum}} 次</div>
          </div>

      </div>
         <div id="print-div3">
             <div>
                 <div style="margin-top: 20px">
                     <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                     <span class="font-small">基本信息</span>
                 </div>
                 <el-card shadow="never" style="margin-top:20px">
                     <el-form  size="mini" label-width="100px" class="minRoW">
                         <el-row>
                             <el-col :span="8">
                                 <el-form-item label="类型：">{{applyType | fifType}}</el-form-item>
                             </el-col>
                             <el-col :span="16">
                                 <el-form-item label="供应商：">{{orderInfo.supplierName}}</el-form-item>
                             </el-col>
                         </el-row>
                         <el-row>
                             <el-col :span="8">
                                 <el-form-item label="申请时间：">{{orderInfo.applyTime}}</el-form-item>
                             </el-col>
                             <el-col :span="8">
                                 <el-form-item label="合同公司：">{{orderInfo.fromCompany}}</el-form-item>
                             </el-col>
                             <el-col :span="8">
                                 <el-form-item label="业务员：">{{orderInfo.userName}}</el-form-item>
                             </el-col>
                         </el-row>
                     </el-form>
                 </el-card>
             </div>

             <div v-if="applyType=='order_pay'">
                 <div style="margin-top: 20px">
                     <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                     <span class="font-small">合同信息</span>
                 </div>
                 <el-card shadow="never" style="margin-top:20px">
                     <el-form  size="mini" label-width="100px" class="minRoW">
                         <el-row>
                             <el-col :span="8">
                                 <el-form-item label="采购订单号："><el-link @click="toInfo" type="primary">{{orderInfo.orderSn}}</el-link></el-form-item>
                             </el-col>
                             <el-col :span="16">
                                 <el-form-item label="采购日期：">{{orderInfo.createTime}}</el-form-item>
                             </el-col>

                         </el-row>
                         <el-row>
                             <el-col :span="8">
                                 <el-form-item label="采购金额：">{{orderInfo.orderAmount}}</el-form-item>
                             </el-col>
                             <el-col :span="8">
                                 <el-form-item label="采购数量：">{{orderInfo.goodsAllNum}}</el-form-item>
                             </el-col>
                             <el-col :span="8">
                                 <el-form-item label="已付金额：">
                                     {{orderInfo.hasPaidAmount}}
                                 </el-form-item>
                             </el-col>
                         </el-row>

                         <el-row>
                             <el-col :span="8">
                                 <el-form-item label="未付金额：">
                                     {{orderInfo.unPaidAmount}}
                                 </el-form-item>
                             </el-col>
                             <el-col :span="8">
                                 <el-form-item label="结算方式及时间，地点：" label-width="160px">{{orderInfo.settleRemark}}</el-form-item>
                             </el-col>
                             <el-col :span="8">
                                 <el-form-item label="合同附件：">
                                     <div>
                                         <a :href="file.url" target="_blank" v-for="file in fileList" style="display: block">{{file.url}}</a>
                                     </div>
                                 </el-form-item>
                             </el-col>

                         </el-row>

                     </el-form>
                 </el-card>
             </div>


             <div style="margin-top: 20px">
                 <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                 <span class="font-small">付款信息</span>
             </div>

             <el-table
                     ref="orderItemTable"
                     :data="payList"
                     style="width: 100%;margin-top: 20px" border>
                 <el-table-column label="申请时间" width="160" align="center">
                     <template slot-scope="scope">
                         {{scope.row.applyCreateTime}}
                     </template>
                 </el-table-column>
                 <el-table-column label="申请付款金额" align="center" width="160">
                     <template slot-scope="scope">
                         <span style="color:red;font-weight: bold">{{scope.row.applyPayAmount | toThousands}}</span>
                     </template>
                 </el-table-column>
               <el-table-column label="目前预付款额度" align="center" width="160">
                 <template slot-scope="scope">
                   <span :style="{color:scope.row.isOutPrePayAmount == 1 ? 'red' :'#606266'}">{{scope.row.currentPrePayAmount}}</span>
                 </template>
               </el-table-column>
               <el-table-column label="是否超额" align="center" width="160">
                 <template slot-scope="scope">
                   <span :style="{color:scope.row.isOutPrePayAmount == 1 ? 'red' :'#606266'}">{{scope.row.isOutPrePayAmount == 1 ? '是' : '否'}}</span>
                 </template>
               </el-table-column>
                 <el-table-column label="申请付款时间" width="150" align="center">
                     <template slot-scope="scope">
                         {{scope.row.applyPayTime}}
                     </template>
                 </el-table-column>
                 <el-table-column label="申请付款方式"   width="100"  align="center">
                     <template slot-scope="scope">
                         {{scope.row.applyPaymentCode | fifPaymentCode}}
                     </template>
                 </el-table-column>
                 <el-table-column label="付款条款"   width="80"  align="center">
                     <template slot-scope="scope">
                         {{scope.row.applyPayRemark }}
                     </template>
                 </el-table-column>
                 <el-table-column label="申请状态"   width="100" align="center">
                     <template slot-scope="scope">
                         {{scope.row.applyState | fifApplyState}}
                     </template>
                 </el-table-column>
                 <el-table-column label="实际付款时间" align="center" width="150">
                     <template slot-scope="scope">
                         <div>{{scope.row.actualPayTime }}</div>
                     </template>
                 </el-table-column>
                 <el-table-column label="实际付款金额" width="100" align="center"  class-name="cspantd">
                     <template slot-scope="scope">
                       <div class="tdDiv" v-for="(item,index) in orderInfo.payList" :style="{'border-bottom': index==orderInfo.payList.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5',}">
                         {{item.actualPayAmount}}
                       </div>
                     </template>
                 </el-table-column>
               <el-table-column label="实际付款方式" width="100" align="center" class-name="cspantd">
                 <template slot-scope="scope">
                   <div class="tdDiv" v-for="(item,index) in orderInfo.payList" :style="{'border-bottom': index==orderInfo.payList.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5',}">
                     {{item.actualPaymentCode | fifPaymentCode}}
                   </div>
                 </template>
               </el-table-column>
<!--                 <el-table-column label="SAP付款码" width="100" align="center">-->
<!--                     <template slot-scope="scope">-->
<!--                         <div>{{scope.row.kingPayNumber }}</div>-->
<!--                     </template>-->
<!--                 </el-table-column>-->
                 <el-table-column label="付款凭证" width="200" align="center">
                     <template slot-scope="scope">
                         <div>
                             <img :src="item" v-for="item in scope.row.actualPayPics" @click="fullImg(item)" style="width:50px;height:50px;object-fit: contain;margin-right:5px"/>
                         </div>
                     </template>
                 </el-table-column>
               <el-table-column label="付款备注" width="200" align="center">
                 <template slot-scope="scope">
                   <div>{{scope.row.actualPayRemark }}</div>
                 </template>
               </el-table-column>
               <el-table-column label="付款银行帐号" width="200" align="center">
                 <template slot-scope="scope">
                   <div>{{scope.row.paymentAccountName}}<span v-if="scope.row.paymentAccountNo != ''">【{{scope.row.paymentAccountNo}}】</span></div>
                 </template>
               </el-table-column>
<!--               <el-table-column label="应付票据" width="200" align="center">-->
<!--                 <template slot-scope="scope">-->
<!--                   <div>{{scope.row.document}}</div>-->
<!--                 </template>-->
<!--               </el-table-column>-->
<!--                 <el-table-column label="操作" width="200" align="center">-->
<!--                     <template slot-scope="scope">-->
<!--                         <el-button type="text" size="small" v-if="orderInfo.applyState==50" @click="showSendFrom2">修改</el-button>-->
<!--                     </template>-->
<!--                 </el-table-column>-->
             </el-table>

             <div style="text-align: center;clear: both;margin-top:20px" class="no-print">

                 <!--财务负责人审核-->
                 <div v-if="(orderInfo.applyState == 30 && purchaseOrderPayCheck) || (orderInfo.applyState == 32 && purchaseOrderPayFinancialManagerCheck)">
                     <el-button type="primary" @click="shenhe(orderInfo.applyState == 30 ? 'financeCheck' : 'financeManageCheck')" :loading="btnLoading" size="small">审核</el-button>
                     <el-button @click="showCancel" size="small">回退</el-button>
                 </div>

                 <!--待付款-->
                 <div v-if="orderInfo.applyState == 40">
                     <el-button type="primary" @click="showSendFrom" size="small">付款</el-button>
                     <el-button @click="showCancelForm2" size="small">取消</el-button>
                 </div>

                 <!--已付款-->
                 <div v-if="orderInfo.applyState == 50">
                     <el-button type="primary" @click="seeCalPay" :loading="btnLoading5" size="small">取消付款</el-button>
                 </div>

             </div>

            <div v-if="orderInfo.applyPayList && orderInfo.applyPayList.length > 0 ">
                <div style="margin-top: 20px;clear: both">
                    <svg-icon icon-class="marker" style="color: #606266"></svg-icon>
                    <span class="font-small">其它付款记录</span>
                </div>
                <el-table
                        ref="orderItemTable"
                        :data="orderInfo.applyPayList"
                        style="width: 100%;margin-top: 20px" border>
                    <el-table-column label="申请时间" width="160" align="center">
                        <template slot-scope="scope">
                            {{scope.row.applyTime}}
                        </template>
                    </el-table-column>
                    <el-table-column label="申请付款金额" align="center" width="160">
                        <template slot-scope="scope">
                            <span style="color:red;font-weight: bold">{{scope.row.applyPayAmount | toThousands}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column label="申请付款时间" width="150" align="center">
                        <template slot-scope="scope">
                            {{scope.row.applyPayTime}}
                        </template>
                    </el-table-column>
                    <el-table-column label="申请付款方式"   width="100"  align="center">
                        <template slot-scope="scope">
                            {{scope.row.applyPaymentCode | fifPaymentCode}}
                        </template>
                    </el-table-column>
                    <el-table-column label="付款条款"   width="80"  align="center">
                        <template slot-scope="scope">
                            {{scope.row.applyPayRemark }}
                        </template>
                    </el-table-column>
                    <el-table-column label="申请状态"   width="100" align="center">
                        <template slot-scope="scope">
                            {{scope.row.applyState | fifApplyState}}
                        </template>
                    </el-table-column>
                    <el-table-column label="实际付款时间" align="center" width="150">
                        <template slot-scope="scope">
                            <div>{{scope.row.actualPayTime }}</div>
                        </template>
                    </el-table-column>

                  <el-table-column label="实际付款金额" width="100" align="center"  class-name="cspantd">
                    <template slot-scope="scope">
                      <div class="tdDiv" v-for="(item,index) in scope.row.payList" :style="{'border-bottom': index==scope.row.payList.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5',}">
                        {{item.actualPayAmount}}
                      </div>
                    </template>
                  </el-table-column>
                  <el-table-column label="实际付款方式" width="100" align="center" class-name="cspantd">
                    <template slot-scope="scope">
                      <div class="tdDiv" v-for="(item,index) in scope.row.payList" :style="{'border-bottom': index==scope.row.payList.length-1 ? '0px solid #EBEEF5' : '1px solid #EBEEF5',}">
                        {{item.actualPaymentCode | fifPaymentCode}}
                      </div>
                    </template>
                  </el-table-column>

<!--                    <el-table-column label="SAP付款码" width="100" align="center">-->
<!--                        <template slot-scope="scope">-->
<!--                            <div>{{scope.row.kingPayNumber }}</div>-->
<!--                        </template>-->
<!--                    </el-table-column>-->

                    <el-table-column label="付款备注" width="200" align="center">
                        <template slot-scope="scope">
                            <div>{{scope.row.actualPayRemark }}</div>
                        </template>
                    </el-table-column>
                    <el-table-column label="付款凭证" width="200" align="center">
                        <template slot-scope="scope">
                            <div>
                                <img :src="item" v-for="item in scope.row.actualPayPics" @click="fullImg(item)" style="width:50px;height:50px;object-fit: contain;margin-right:5px"/>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="200" align="center">
                        <template slot-scope="scope">
                            <el-button type="text" size="small"  @click="toApplyInfo(scope.row)">查看</el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </div>


             <div style="margin-top: 20px;clear: both">
                 <el-menu :default-active="logTab" class="el-menu-demo" mode="horizontal">
                     <el-menu-item index="1">操作记录</el-menu-item>
                 </el-menu>
             </div>
             <div style="margin-top:20px;border:1px solid #EBEEF5;padding:20px 20px 0 20px">
                 <div v-if="logTab == 1">
                     <el-timeline>
                         <el-timeline-item
                                 v-for="(activity, index) in orderInfo.processLogs"
                                 :key="index">
                         <span>
                             <span style="padding-right:10px;">{{activity.processTime}}</span>：{{activity.processContent}}
                             <span v-show="activity.processRemark && activity.processRemark != ''" style="color:red;padding-left:5px">备注：{{activity.processRemark}}</span>
                         </span>
                         </el-timeline-item>
                     </el-timeline>
                     <div style="color:#888;padding:20px;text-align: center;font-size:12px" v-if="orderInfo.processLogs && orderInfo.processLogs.length == 0">- 暂无数据 -</div>
                 </div>

             </div>
         </div>

    </el-card>

      <!--回退弹窗-->
      <el-dialog
              :close-on-click-modal="false"
              title="审核回退"
              :visible.sync="dialogVisible2"
              width="500px">
          <el-form :model="passForm" size="mini" label-width="100px" ref="passForm" :rules="rules2">
              <el-form-item label="备注信息：" prop="remark">
                  <el-input type="textarea" v-model="passForm.remark" :autosize="{ minRows: 2, maxRows: 6}"></el-input>
              </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
          <el-button  @click="dialogVisible2 = false">取消</el-button>
          <el-button @click="shenhe('back')" :loading="btnLoading2" type="primary">确定</el-button>
      </span>
      </el-dialog>

      <!--付款弹窗-->
      <el-dialog
              :close-on-click-modal="false"
              :beforeClose="handleClose3"
              title="确认付款"
              :visible.sync="dialogVisible3"
              width="700px">
          <el-form :model="sendForm" size="mini" label-width="120px" ref="sendForm" :rules="rules3">
              <el-form-item label="供应商：" >
                  {{sendForm.supplierName}}
              </el-form-item>
              <el-form-item label="付款公司：" >
                  {{sendForm.fromCompany}}
              </el-form-item>
            <el-form-item label="申请金额：" >
              {{sendForm.thisPayAmount}}
            </el-form-item>
            <el-form-item label="付款方式：" prop="paymentCode">
              <el-radio-group v-model="sendForm.paymentCode" @change="changepayType">
                <el-radio label="chengdui">承兑</el-radio>
                <el-radio label="cash">现金汇款</el-radio>
                <el-radio label="weixin">微信</el-radio>
                <el-radio label="alipay">支付宝</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="付款金额：" prop="payAmount">
              <el-input-number v-model="sendForm.payAmount" :disabled="sendForm.paymentCode == 'chengdui'"  :precision="2" :min="0" :max="Number((sendForm.thisPayAmount-sendForm.balance).toFixed(2))" style="width:150px;display: inline-block"></el-input-number>
            </el-form-item>
            <el-form-item label="余额：" prop="balance">
              <el-input-number v-model="sendForm.balance" :precision="2" :min="0" :max="Number((sendForm.thisPayAmount-sendForm.payAmount).toFixed(2))" style="width:130px;display: inline-block"></el-input-number>
              <span style="font-size:12px;padding-left:10px;color:red">余额与付款金额之和不能超过申请金额</span>
            </el-form-item>

            <el-form-item label="付款银行帐号：" prop="FName" v-if="sendForm.paymentCode != 'chengdui'" key="FName">
              <el-select clearable v-model="sendForm.FName" style="width:400px">
                <el-option v-for="(item,index) in brandList" :key="item.FName" :value="item.FName" :label="item.FName+'【'+item.FNumber+'】'"></el-option>
              </el-select>
            </el-form-item>
<!--            <el-form-item label="应收票据背书：" prop="document" v-if="sendForm.paymentCode == 'chengdui'" key="document">-->
<!--              <el-select multiple filterable v-model="sendForm.document" style="width:100%">-->
<!--                <el-option v-for="item in billNoList" :key="item.billNo" :value="item.billNo" :label="'收票日期：'+item.billDate+'，金额：'+item.billAmount+'，票据号：'+item.billNo+'，票据包号：'+item.billNumber"></el-option>-->
<!--              </el-select>-->
<!--            </el-form-item>-->

              <el-form-item label="付款凭证：" prop="payPics">
                  <div style="width: 100%;height: 150px; border:1px solid #DCDFE6;cursor: default;border-radius: 4px;">
                      <div style="width: 100%;height: 150px; border:1px solid #DCDFE6;cursor: default;border-radius: 4px;">
                          <div v-for="(item,index) in sendForm.payPics" style="display: inline-block;margin-right:5px;width:100px;height:100px;position: relative">
                              <img :src="item" style="width:100px;height:100px;object-fit: contain;border:0">
                              <i class="el-icon-error" style="position: absolute;right:-10px;top:0;cursor: pointer;font-size:20px;color:red" @click="delImg(index)"></i>
                          </div>
                      </div>
                  </div>
              </el-form-item>


<!--              <el-form-item label="SAP付款码：" prop="kingPayNumber">-->
<!--                  <el-input  v-model="sendForm.kingPayNumber" style="width:150px"></el-input>-->
<!--              </el-form-item>-->
              <el-form-item label="备注信息：">
                  <el-input type="textarea" v-model="sendForm.payRemark" :autosize="{ minRows: 2, maxRows: 6}"></el-input>
              </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose3">取 消</el-button>
          <el-button type="primary" @click="handleConfirm3" :loading="btnLoading3">确 定</el-button>
      </span>
      </el-dialog>

      <!--取消付款弹窗-->
      <el-dialog
              :close-on-click-modal="false"
              :beforeClose="handleClose5"
              title="取消付款"
              :visible.sync="dialogVisible5"
              width="500px">
          <div style="font-size:14px;padding-bottom:40px;">确认取消此条付款记录！</div>
          <el-form :model="cancelForm" size="mini" label-width="100px" ref="cancelForm" :rules="rules5">
              <el-form-item label="取消原因：" prop="cancelRemark">
                  <el-input type="textarea" v-model="cancelForm.cancelRemark" :autosize="{ minRows: 2, maxRows: 6}"></el-input>
              </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose5">取 消</el-button>
          <el-button type="primary" @click="handleConfirm5" :loading="btnLoading5">确 定</el-button>
      </span>
      </el-dialog>

      <!--放大图片-->
      <el-dialog
              :visible.sync="dialogVisible4"
              width="800px">
        <a :href="fullSrc" target="_blank">
          <img :src="fullSrc" style="width:100%;"/>
        </a>

      </el-dialog>

      <!--打印弹窗-->
      <el-dialog
              :close-on-click-modal="false"
              :beforeClose="closePrint"
              :visible.sync="dialogVisible6"
              width="900px">
          <div id="print-div" style="height:100%;background: #fff">
              <div class="title">{{orderInfo.fromCompany}}采购付款单</div>
              <div class="paper-top">
                  <table border="0" cellpadding="0" cellspacing="0" style="width:100%" class="pring-table">
                      <tr>
                          <td style=" white-space:nowrap;width:100px;" valign="top">收款单位：</td>
                          <td valign="top">{{orderInfo.supplierName}}</td>
                          <td style=" white-space:nowrap;width:100px;" valign="top">申请付款日期：</td>
                          <td valign="top" style=" white-space:nowrap;">{{orderInfo.applyPayTime}}</td>
                      </tr>
                      <tr>
                          <td style=" white-space:nowrap;width:100px;" valign="top">品名型号:</td>
                          <td style="padding-right:20px;width:60%" valign="top">
                              <div style="max-width:100%">
                                  <div v-for="item in orderInfo.ordGoodsList" >{{item.goodsName}}{{item.goodsSn}} / {{item.goodsNum}}吨 / ￥{{item.goodsPrice}}</div>
                              </div>

                          </td>
                          <td style=" white-space:nowrap;width:100px;" valign="top">申请付款金额：</td>
                          <td valign="top" style=" white-space:nowrap;">{{orderInfo.applyPayAmount | toThousands}}</td>
                      </tr>
                      <tr>
                          <td style=" white-space:nowrap;width:100px;" valign="top">采购日期：</td>
                          <td valign="top">{{orderInfo.createTime}}</td>
                          <td style=" white-space:nowrap;width:100px;" valign="top">合同编号：</td>
                          <td valign="top" style=" white-space:nowrap;">{{orderInfo.orderSn}}</td>
                      </tr>
                      <tr>
                          <td style=" white-space:nowrap;width:100px;" valign="top">备注：</td>
                          <td valign="top">{{orderInfo.actualPayRemark}}</td>
                          <td style=" white-space:nowrap;width:100px;" valign="top">付款方式：</td>
                          <td valign="top">{{orderInfo.applyPaymentCode | fifPaymentCode}}</td>
                      </tr>

                      <tr>
                          <td style=" white-space:nowrap;width:100px;">经办人：</td>
                          <td style=" white-space:nowrap;">{{orderInfo.userName}}</td>
                          <td style=" white-space:nowrap;width:100px;">部门负责人：</td>
                          <td></td>
                      </tr>
                  </table>
              </div>
              <div style="margin-top: 20px;clear: both">
                  <el-menu :default-active="logTab" class="el-menu-demo" mode="horizontal">
                      <el-menu-item index="1">操作记录</el-menu-item>
                  </el-menu>
              </div>
              <div style="margin-top:20px">
                  <el-timeline>
                      <el-timeline-item
                              v-for="(activity, index) in orderInfo.processLogs"
                              :key="index">
                         <span>
                             <span style="padding-right:10px;">{{activity.processTime}}</span>：{{activity.processContent}}
                             <span v-show="activity.processRemark && activity.processRemark != ''" style="color:red;padding-left:5px">备注：{{activity.processRemark}}</span>
                         </span>
                      </el-timeline-item>
                  </el-timeline>
                  <div style="color:#888;padding:20px;text-align: center;font-size:12px" v-if="orderInfo.processLogs && orderInfo.processLogs.length == 0">- 暂无数据 -</div>
              </div>

          </div>
          <div slot="footer" class="dialog-footer" style="text-align: center">
              <el-button type="primary" size="small" style="width:150px;" @click="printdiv">打印</el-button>
          </div>
      </el-dialog>

      <!--修改付款弹窗-->
      <el-dialog
              :close-on-click-modal="false"
              :beforeClose="handleClose7"
              title="修改付款申请"
              :visible.sync="dialogVisible7"
              width="500px">
          <el-form :model="sendForm2" size="mini" label-width="120px" ref="sendForm2" :rules="rules7">
              <el-form-item label="付款金额：" >
                   {{orderInfo.actualPayAmount}}
              </el-form-item>
              <el-form-item label="付款凭证：" prop="payPics">
                  <div style="width: 100%;height: 150px; border:1px solid #DCDFE6;cursor: default;border-radius: 4px;">
                      <div v-for="(item,index) in sendForm2.payPics" style="display: inline-block;margin-right:5px;width:100px;height:100px;position: relative">
                          <img :src="item" style="width:100px;height:100px;object-fit: contain;border:0">
                          <i class="el-icon-error" style="position: absolute;right:-10px;top:0;cursor: pointer;font-size:20px;color:red" @click="delImg(index)"></i>
                      </div>
                  </div>
              </el-form-item>
              <el-form-item label="金蝶付款码：" prop="kingPayNumber">
                  <el-input  v-model="sendForm2.kingPayNumber" style="width:150px"></el-input>
              </el-form-item>
              <el-form-item label="备注：">
                  <el-input type="textarea" v-model="sendForm2.payRemark" :autosize="{ minRows: 2, maxRows: 6}"></el-input>
              </el-form-item>

          </el-form>
          <span slot="footer" class="dialog-footer">
          <el-button @click="handleClose7">取 消</el-button>
          <el-button type="primary" @click="handleConfirm7" :loading="btnLoading7">确 定</el-button>
      </span>
      </el-dialog>

      <!--取消申请弹窗-->
      <el-dialog
              :close-on-click-modal="false"
              title="取消申请"
              :visible.sync="dialogVisible8"
              width="500px">
          <el-form :model="cancelForm2" size="mini" label-width="100px" ref="cancelForm2" :rules="rules8">
              <el-form-item label="取消原因：" prop="remark">
                  <el-input type="textarea" v-model="cancelForm2.remark" :autosize="{ minRows: 2, maxRows: 6}"></el-input>
              </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
          <el-button  @click="handleClose8">取消</el-button>
          <el-button @click="handleConfirm8()" :loading="btnLoading8" type="primary">确定</el-button>
      </span>
      </el-dialog>
  </div>
</template>

<script>
    import { mapGetters } from 'vuex'
    import axios from 'axios'
    import store from '@/store'
    import { applyPayInfoPurchase,applyPayProcess,postPurchasePay,postCancelPay,getCustomerSetting,purchaseRemark,syncOneKingOrderPurchase,uploadBase64,editApplyInfo,purchaseUpdatePrintNum,cancelApplyPay,getQiniuToken} from '@/api/partner'
    import {validateCommission} from '@/utils/validate';
    import {accounting} from "@/utils/accounting.js"
    import {bankAccountList,getPayReceipt} from '@/api/company';
    import "@/utils/jQuery.print"
    const defaultSendForm = {
        supplierName:null,
        fromCompany:null,
        paymentCode:'cash',
        payPics:null,
        payAmount:null,
        payRemark: null,
        kingPayNumber:null,
        FName:'',
        thisPayAmount:'',
        balance:0
    };
    const defaultSendForm2 = {
        payPics:null,
        payRemark: null,
        kingPayNumber:null,
    };
    const defaultCancelForm = {
        payId:null,
        cancelRemark:null,
    }
    export default {
        name: "customerDetail",
        data(){
            const isvalidateCommission = (rule, value, callback) => {
                if (!validateCommission(parseFloat(value))) {
                    callback(new Error('非负整数或小数'))
                } else if(value <= 0){
                    callback(new Error('请输入大于0的数'))
                }else {
                    callback()
                }
            };
          const validatePayAmount = (rule, value, callback) => {
            let sum = Number((this.sendForm.payAmount+this.sendForm.balance).toFixed(2))
            if(!value && value !=0){
              callback(new Error('此项必填'))
            }else if(sum > this.sendForm.thisPayAmount){
              callback(new Error('付款金额与余额之和大于申请金额'))
            }else if(sum <= 0){
              callback(new Error('付款金额与余额之和需大于0'))
            }else {
              callback()
            }
          };
            return{
                roles:store.getters.roles ? store.getters.roles : [],
                loading:false,
                applyId:this.$route.query.applyId,
                applyType:this.$route.query.applyType,
                orderInfo:{},
                btnLoading:false,
                logTab:'1',
                fileList:[],
                fullSrc:'',
                payList:[],
                dialogVisible4:false,
                btnLoading2:false,
                dialogVisible2:false,
                passForm:{
                    remark:'',
                },
                rules2:{
                    remark:[{required: true, trigger: 'blur' ,message: '请输入回退原因',}],
                },
                dialogVisible3:false,
                btnLoading3:false,
                sendForm:JSON.parse(JSON.stringify(defaultSendForm)),
                rules3:{
                    paymentCode:[{required: true, trigger: 'change' ,message: '请选择付款方式',}],
                    payPics:[{required: true, trigger: 'change' ,message: '请上传付款凭证',}],
                    payAmount:[{required: true, trigger: 'blur' ,validator: validatePayAmount,}],
                    kingPayNumber:[{required: true, trigger: 'blur' ,message: '请输入金蝶付款码',}],
                  FName:[{required: true, trigger: 'change' ,message: '此项必填'}],
                  document:[{required: true, trigger: 'change' ,message: '此项必填'}],
                  balance:[{required: true, trigger: 'blur' ,validator: validatePayAmount,}],
                },
                upUrl:'',

                dialogVisible5:false,
                btnLoading5:false,
                cancelForm:JSON.parse(JSON.stringify(defaultCancelForm)),
                rules5:{
                    cancelRemark:[{required: true, trigger: 'blur' ,message: '请输入取消原因',}],
                },
                dialogVisible6:false,
                dialogVisible7:false,
                btnLoading7:false,
                sendForm2:JSON.parse(JSON.stringify(defaultSendForm)),
                rules7:{
                    payPics:[{required: true, trigger: 'change' ,message: '请上传付款凭证',}],
                    kingPayNumber:[{required: true, trigger: 'blur' ,message: '请输入金蝶付款码',}],
                },

                dialogVisible8:false,
                btnLoading8:false,
                cancelForm2:{
                    remark:'',
                },
                rules8:{
                    remark:[{required: true, trigger: 'blur' ,message: '请输入取消原因',}],
                },

                uploadToken:{
                  token:'',
                },
                imgDomain:'',
                brandList:[],
                billNoList:[]
            }
        },
        computed: {
            ...mapGetters([
                'name',
                'mobile',
                'userId',
                'isMange',
            ]),
            purchaseOrderPayCheck(){
                if(this.roles.indexOf("purchaseOrderPayCheck") != -1){
                    return true
                }else{
                    return false
                }
            },

          purchaseOrderPayFinancialManagerCheck(){
            if(this.roles.indexOf("purchaseOrderPayFinancialManagerCheck") != -1){
              return true
            }else{
              return false
            }
          },

        },
        watch:{
            upUrl(){
              let data = {};
              let pic = this.upUrl.replace(/^.*?base64,/, '');
              data.pic = pic;
              data.token = this.uploadToken.token;
              data.imgDomain = this.imgDomain;
                uploadBase64(data).then((res)=>{
                  if(res.src){
                    if(this.dialogVisible3){
                      this.sendForm.payPics.push(res.src) ;
                    }else{
                      this.sendForm2.payPics.push(res.src) ;
                    }
                  }else{
                    this.$message.error('上传失败')
                  }

                });
            },
        },

        created() {
            this.getUploadToken();
            this.getPageInfo();
            this.pasteImage();

        },

        filters: {
            fifType(val){
                if(val == 'advance_pay'){
                    return '预付款'
                }else if(val == 'order_pay'){
                    return '采购付款'
                }else if(val == 'order_refund'){
                    return '退款'
                }
            },
            toThousands(num){
               return  accounting.formatMoney(num,"")
            },

          fifApplyState(val){
            if(val == 0){
              return '待采购员审核'
            }else if(val == 10){
              return '作废'
            }else if(val == 20){
              return '待产品负责人审核'
            }else if(val == 23){
              return '待采购部门负责人确认'
            }else if(val == 30){
              return '待财务会计审核'
            }else if(val == 32){
              return '待财务经理审核'
            }else if(val == 35){
              return '待总经理确认'
            }else if(val == 40){
              return '待支付'
            }else if(val == 50){
              return '已支付'
            }
          },
            fifPaymentCode(val){
              if(val == 'chengdui'){
                return '承兑'
              }else if(val == 'cash'){
                return '现金汇款'
              }else if(val == 'weixin'){
                return '微信'
              }else if(val == 'alipay'){
                return '支付宝'
              }else if(val == 'balance'){
                return '余额'
              }
            },
        },
        methods:{
          getbillNoList(orderId){
            getPayReceipt({orderId:orderId}).then((res)=>{
              this.billNoList = res.list
            })
          },
          changepayType(){
            // this.sendForm.document = []
            if(this.sendForm.paymentCode == 'chengdui'){
              this.sendForm.payAmount = 0
              this.sendForm.balance = this.orderInfo.applyPayAmount
            }else{
              this.sendForm.payAmount = this.orderInfo.applyPayAmount
              this.sendForm.balance = 0
            }
          },
          getBrandList(companyName){
            bankAccountList({companyName:companyName}).then((res)=>{
              this.brandList = res.list
            })
          },

          //获取七牛TOKEN
          getUploadToken(){
            return getQiniuToken().then((res)=>{
              this.uploadToken.token = res.token;
              this.imgDomain = res.domain
            })
          },
            //显示取消申请弹窗
            showCancelForm2(){
                this.dialogVisible8 = true;
                this.cancelForm2.applyId = this.orderInfo.applyId;
                this.cancelForm2.remark = '';
            },
            //关闭取消申请弹窗
            handleClose8(){
                this.dialogVisible8 = false;
                this.$refs.cancelForm2.clearValidate();
            },

            //提交取消申请
            handleConfirm8(){
                this.$refs.cancelForm2.validate((valid) => {
                    if (valid) {
                        this.btnLoading8 = true;
                        let data = JSON.parse(JSON.stringify(this.cancelForm2));
                        cancelApplyPay(data).then(()=>{
                            this.btnLoading8 = false;
                            this.handleClose8();
                            this.getPageInfo();
                        }).catch(()=>{
                            this.btnLoading8 = false;
                        })
                    }
                })
            },
            //去其他申请单详情
            toApplyInfo(item){
                let routeData = this.$router.resolve({name:'purchaseApplyInfo',query:{applyId:item.applyId}});
                window.open(routeData.href);
            },
            delImg(index){
                if(this.dialogVisible3){
                    this.sendForm.payPics.splice(index,1)
                }else{
                    this.sendForm2.payPics.splice(index,1)
                }

            },
            //显示修改付款弹窗
            showSendFrom2(){
              this.getUploadToken().then(()=>{
                this.dialogVisible7 = true;
                this.sendForm2.applyId = this.orderInfo.applyId;
                this.sendForm2.payRemark = this.orderInfo.actualPayRemark;
                this.sendForm2.kingPayNumber = this.orderInfo.kingPayNumber;
                this.sendForm2.payPics = JSON.parse(JSON.stringify(this.orderInfo.actualPayPics));
              })

            },
            //关闭修改付款弹窗
            handleClose7(){
                this.dialogVisible7 = false;
                this.$refs.sendForm2.clearValidate();
            },

            //提交修改付款弹窗
            handleConfirm7(){
                this.$refs.sendForm2.validate((valid) => {
                    if (valid) {
                        this.btnLoading7 = true;
                        let data = JSON.parse(JSON.stringify(this.sendForm2));
                        editApplyInfo(data).then(()=>{
                            this.btnLoading7 = false;
                            this.handleClose7();
                            this.getPageInfo();
                        }).catch(()=>{
                            this.btnLoading7 = false;
                        })
                    }
                })
            },
            //显示打印弹窗
            showPrint(){
                this.dialogVisible6 = true;

            },
            //关闭打印弹窗
            closePrint(){
                this.dialogVisible6 = false;
                this.getPageInfo()
            },

            //打印
            printdiv(){
                purchaseUpdatePrintNum({applyId:this.applyId});
                $("#print-div").print({
                    globalStyles:true,//是否包含父文档的样式，默认为true
                    mediaPrint:true,//是否包含media='print'的链接标签。会被globalStyles选项覆盖，默认为false
                    stylesheet:null,//外部样式表的URL地址，默认为null
                    noPrintSelector:".no-print",//不想打印的元素的jQuery选择器，默认为".no-print"
                    iframe:true,//是否使用一个iframe来替代打印表单的弹出窗口，true为在本页面进行打印，false就是说新开一个页面打印，默认为true
                    append:null,//将内容添加到打印内容的后面
                    prepend:null,//将内容添加到打印内容的前面，可以用来作为要打印内容
                    deferred: $.Deferred()//回调函数
                });
            },
            //去详情页
            toInfo(item){
                let routeData = this.$router.resolve({name:'purchaseContractDetail',query:{id:this.orderInfo.orderId}});
                window.open(routeData.href);
            },
            //显示取消支付
            seeCalPay(){
                this.dialogVisible5 = true;
                this.cancelForm.applyId = this.orderInfo.applyId;
                this.cancelForm.payId = this.orderInfo.payId;
                this.cancelForm.cancelRemark = '';
            },
            //关闭取消付款弹窗
            handleClose5(){
                this.dialogVisible5 = false;
                this.$refs.cancelForm.clearValidate();
            },

            //提交取消付款弹窗
            handleConfirm5(){
                this.$refs.cancelForm.validate((valid) => {
                    if (valid) {
                        this.btnLoading5 = true;
                        let data = JSON.parse(JSON.stringify(this.cancelForm));
                        postCancelPay(data).then(()=>{
                            this.btnLoading5 = false;
                            this.handleClose5();
                            this.getPageInfo();
                        }).catch(()=>{
                            this.btnLoading5 = false;
                        })
                    }
                })
            },

            //粘贴图片
            pasteImage() {
                let upUrl = ''
                document.addEventListener('paste',(event)=> {
                    let isChrome = false;
                    if (event.clipboardData || event.originalEvent) {
                        //某些chrome版本使用的是event.originalEvent
                        let clipboardData = (event.clipboardData || event.originalEvent.clipboardData);
                        if(clipboardData.items){
                            // for chrome
                            let  items = clipboardData.items, len = items.length, blob = null;
                            isChrome = true;
                            for (let i = 0; i < len; i++) {
                                if (items[i].type.indexOf("image") !== -1) {
                                    //getAsFile() 此方法只是living standard firefox ie11 并不支持
                                    blob = items[i].getAsFile();
                                }
                            }
                            if(blob!==null){
                                let blobUrl=URL.createObjectURL(blob);
                                let reader = new FileReader();
                                // base64码显示

                                reader.onload =  (event)=> {
                                    this.upUrl = event.target.result;
                                };
                                reader.readAsDataURL(blob);
                            }
                        }
                    }
                });
            },

            //显示付款弹窗
            showSendFrom(){
             this.getUploadToken().then(()=>{
               this.dialogVisible3 = true;
               this.sendForm.supplierName = this.orderInfo.supplierName;
               this.sendForm.fromCompany = this.orderInfo.fromCompany;
               this.sendForm.applyId = this.orderInfo.applyId;

               this.sendForm.payRemark = '';
               this.sendForm.payPics = [];
               // this.sendForm.document = []
               this.sendForm.FName = '';

               this.sendForm.thisPayAmount = this.orderInfo.applyPayAmount
               this.sendForm.paymentCode = 'cash'
               this.sendForm.payAmount = this.orderInfo.applyPayAmount;
               this.sendForm.balance = 0
               this.getbillNoList(this.orderInfo.orderId)
               this.getBrandList(this.orderInfo.fromCompany)
             })

            },
            //关闭付款弹窗
            handleClose3(){
                this.dialogVisible3 = false;
                this.$refs.sendForm.clearValidate();
            },

            //提交付款弹窗
            handleConfirm3(){
                this.$refs.sendForm.validate((valid) => {
                    if (valid) {
                        this.btnLoading3 = true;
                        let data = JSON.parse(JSON.stringify(this.sendForm));
                        if(data.paymentCode == 'chengdui'){
                          data.FName = ''
                        }
                        postPurchasePay(data).then(()=>{
                            this.btnLoading3 = false;
                            this.handleClose3();
                            this.getPageInfo();
                        }).catch(()=>{
                            this.btnLoading3 = false;
                        })
                    }
                })
            },

            //显示取消弹窗
            showCancel(){
                this.dialogVisible2 = true;
                this.passForm.remark = ''
            },
            //审核
            shenhe(type){
               console.log(type)
                let key;
                let data = {};
                data.applyId= this.applyId;
                data.action = type;
                if(type == 'financeCheck' || type == 'financeManageCheck'){
                    key = 'btnLoading';
                    this[key] = true;
                    this.submitPass(data,key)
                }else if(type == 'back'){
                    key = 'btnLoading2';
                    data.remark = this.passForm.remark;
                    this.$refs.passForm.validate((valid) => {
                        if (valid) {
                            this[key] = true;
                            this.submitPass(data,key)
                        }
                    });
                }
            },

            submitPass(data,key){
                applyPayProcess(data).then(()=>{
                    this.$message({
                        message: '操作成功！',
                        type: 'success'
                    });
                    this[key] = false;
                    this.dialogVisible2 = false;
                    this.getPageInfo()
                }).catch(()=>{
                    this[key] = false;
                })
            },

            fullImg(src){
                this.dialogVisible4 = true;
                this.fullSrc = src;
            },


            //获取合同详情
            getPageInfo(){
                this.loading = true;
                applyPayInfoPurchase({applyId:this.applyId}).then(res=>{
                    this.orderInfo = res;
                    this.fileList = [];
                    if(this.orderInfo.contractUrl != ''){
                        let contractUrl = this.orderInfo.contractUrl.split(",");
                        contractUrl.forEach((el)=>{
                            this.fileList.push({name:el,url:el})
                        })
                    }
                    this.payList = [];
                    this.payList.push({
                        applyCreateTime:res.applyCreateTime,
                        applyPayTime:res.applyPayTime,
                        applyPayAmount:res.applyPayAmount,
                        applyPaymentCode  :res.applyPaymentCode  ,
                        applyPayRemark  :res.applyPayRemark  ,
                        applyState  :res.applyState  ,
                        actualPayTime  :res.actualPayTime  ,
                        actualPayAmount  :res.actualPayAmount  ,
                        actualPayRemark  :res.actualPayRemark  ,
                        actualPayPics  :res.actualPayPics  ,
                        kingPayNumber:res.kingPayNumber,
                        paymentAccountNo:res.paymentAccountNo,
                        paymentAccountName:res.paymentAccountName,
                        currentPrePayAmount:res.currentPrePayAmount,
                        isOutPrePayAmount:res.isOutPrePayAmount
                        // document:res.document
                    })
                    this.loading = false;
                });
            },
        },

    }
</script>

<style  lang="scss">
  .detail-container {
    width: 90%;
    padding: 20px 20px 20px 20px;
    margin: 20px auto;
    .el-card__header{
      background: #f8f8f8;
      .kehu-name{
        display: inline-block;
        font-size:14px;
        vertical-align: middle;
      }
      .kehu-label{
        font-size:12px;
        vertical-align: middle;
        display: inline-block;
        margin-left:15px;
        color: #409eff;
        background: #ecf5ff;
        border: 1px solid #b3d8ff;
        height:24px;
        line-height: 24px;
        padding:0 10px;
        border-radius: 5px;
      }
      .kehu-info{
        text-align: right;
        font-size: 12px;
        color:#333;
        line-height: 20px;
        span{
          padding-left:16px;
        }
      }
    }
    .operate-container {
      background: #F2F6FC;
      height: 80px;
      margin: -20px -20px 0;
      line-height: 80px;
    }
  }
  .price-block{
    font-size:12px;
    line-height:30px;
    .lab{
      display: inline-block;
      width:100px;
      text-align: right;
    }
    .text{
      display: inline-block;
    }
  }
  .minRoW .el-form-item{
      margin-bottom:5px;
  }
  .tongJitable{
      border-left:1px solid #EBEEF5;
      border-top:1px solid #EBEEF5;
      font-size:12px;
      margin-bottom:20px;
      td{
          border-right:1px solid #EBEEF5;
          border-bottom:1px solid #EBEEF5;
          div.tddiv{
              min-height: 30px;
              line-height: 30px;
              padding:0 5px;
              text-align: center;
              white-space:  nowrap
          }
      }
      .bgtd{
          background: #f5f7fa;
      }
  }
  #print-div{
      font-size:12px;
      font-family: "Microsoft YaHei";
      color:#000;
      .title{
          font-size:24px;
          font-weight: bold;
          text-align: center;
          line-height: 40px;
      }
      .paper-top{
          margin-top:20px;
          line-height: 30px;
      }
      .good-table{
          margin-top:20px;
          table{
              border-left:1px solid #000;
              border-bottom:1px solid #000;
              td,th{
                  font-weight: normal;
                  border-right:1px solid #000;
                  border-top:1px solid #000;
                  padding:5px 10px;
                  line-height: 20px;
              }
          }
      }
      .paper-bottom{
          margin-top:10px;
          line-height: 20px;
      }
      .pring-table{
          border-top:1px solid #000;
          border-right:1px solid #000;
          td{
              border-bottom:1px solid #000;
              border-left:1px solid #000;
              padding:0 10px;
          }
      }
  }
</style>
